// wx://form-field
// 使自定义组件有类似于表单控件的行为。 form 组件可以识别这些自定义组件，并在 submit 事件中返回组件的字段名及其对应字段值

import {
  nxValidator
} from '../../components/nx-validator';

module.exports = Behavior({
  behaviors: ['wx://form-field'],
  properties: {
    /** 之所以将所有信息以对象的方式传入，是为了后面的数据验证 */
    props: {
      type: null,
      observer(props) {
        if (props) {
          if (props.defaultValue !== undefined && props.value === undefined) {
            props.value = props.defaultValue;
          }
          if (props.value === undefined) {
            // props.value = ''
          }
          this.setData({
            ...this.data, //默认值
            placeholder: props.placeholder || '请输入' + props.label, //默认值
            ...props, //新值
          });
        }
      }
    },
    value: {
      type: null,
      value: undefined,
      async observer(v) {
        const d = this.data;
        if (v) {
          await nxValidator(d, v).then(() => {
            this.setData({
              ...d,
            });
          });
        }
      }
    },
    placeholder: String,
    // 是否展示分割线
    showDivider: {
      type: Boolean,
      value: true,
    },
    // 字段说明信息
    tip: {
      type: String,
      value: "",
    },
    // 是否是Label标签
    isLabel: {
      type: Boolean,
      value: false,
    },
    // 是否展示label名称
    showLabel: {
      type: Boolean,
      value: true,
    },
  },

  data: {
    required: false,
    current: false, //是否当前在操作
    // 展示提示信息
    showTip: false,
    // 是否展示该字段（用于动态字段）
    isShow: true,
  },

  created: function () {},

  attached: function () {},

  ready: function () {},

  methods: {
    input: function (e) {
      const v = e.detail.value;
      const d = this.data;

      // 给组件赋值，不然提交表单时没有值
      // 从验证函数中提出来，是由于验证可能导致赋值延迟
      this.setData({
        value: v,
        valueFromProp: false,
      });

      // 验证数据
      nxValidator(d, v, false).then(() => {
        this.setData({
          errorMessage: d.errorMessage,
        });
      });

      this.triggerEvent('input', e.detail.value)
    },
    blur: function (e) {
      const v = e.detail.value;
      const d = this.data;

      // 给组件赋值，不然提交表单时没有值
      // 从验证函数中提出来，是由于验证可能导致赋值延迟
      this.setData({
        value: v,
        valueFromProp: false,
      });

      // 验证数据
      nxValidator(d, v).then(() => {
        this.setData({
          errorMessage: d.errorMessage,
          current: false,
        });
      });
      this.triggerEvent("change", e.detail);
    },
    focus() {
      this.setData({
        current: true,
      });
    },
    showTip() {
      const {
        showTip
      } = this.data;

      this.setData({
        showTip: !showTip,
      });
    }
  },

  observers: {
    'value': function (value) {
      const {
        valueFromProp
      } = this.data;

      // 只有当值的改变来源于属性时，才改变currentValue的值，也就是改变微信input组件的值
      // 这里之所以不每次都改变currentValue，是用来解决输入验证时内容闪烁的问题
      if (valueFromProp === true) {
        this.setData({
          currentValue: value,
          valueFromProp: true,
        });
      } else {
        this.setData({
          valueFromProp: true,
        });
      }
    },
  },
})